/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<form @submit="submitForm">
			<view class="container">
				<view @tap="enterAddressPage" class="user-mes">
					<view class="user-contact">{{addressList.consignee}} {{addressList.mobile}}</view>
					<view class="location">
						<view class="address">{{addressList.province_name}}{{addressList.city_name}}{{addressList.district_name}}{{addressList.address}}</view>
						<view class="pos-icon">
							<image class="wh100" :src="imgUrl+'common/iconfont-address.png'" role="img"></image>
						</view>
					</view>
					<view class="border-img">
						<image class="wh100" :src="imgUrl+'common/tt.png'" role="img"></image>
					</view>
					<view class="update-logistics">
						<image class="arrow-rigth" :src="imgUrl+'common/icon-arrowdown.png'" role="img"></image>
					</view>
				</view>
				<view class="order-meg">
					<view class="store-list" v-for="(item,index) in treaminfo.order_list" :key="index">
						<view class="store-mes">
							<view class="store-ico">
								<image class="wh100" :src="imgUrl+'cart/carnew.png'"></image>
							</view>
							<view class="store-name">{{storeInfo.store_name}}</view>
						</view>
						<view class="order-detail" v-for="(item2,index2) in item.order_goods" :key="index2">
							<view class="goods-img">
								<image class="wh100" :src="hostUrl+'/mall/goods/thumb_image?goods_id='+item2.goods_id+'&width=400&height=400'"
								 role="img"></image>
							</view>
							<navigator class="order-cont" url="/pages/goods/goodsInfo/goodsInfo?goods_id=2976" role="navigation">
								<view class="goods-name ellipsis-2">{{item2.goods_name}}</view>
								<view class="goods-support ellipsis-1">不支持七天无理由退货</view>
								<view class="goods-color ellipsis-1">{{item2.spec_key_name}}</view>
							</navigator>
							<view class="order-num">
								<view class="co-red">￥{{filter(item2.goods_price)}}</view>
								<view class="goods-num">
									<view @tap="reduce">-</view>
									<input type="number" :value="goodsInputNum" @blur="inputNum" />
									<view @tap="add">+</view>
								</view>
							</view>
						</view>
						<view class="set-mes">
							<!-- 拼团没有优惠券和积分 -->
							<!-- <view @tap="useCoupon" class="set-item" data-idx="undefined">
								<view class="coupon">
									<view>优惠券</view>
									<view class="coupon-num">0张可用</view>
								</view>
								<view class="set-btn">
									<view>未使用</view>
									<image class="arrow-rigth" :src="imgUrl+'common/icon-arrowdown.png'" role="img"></image>
								</view>
							</view> -->
							<view class="set-item">
								<view>备注：</view>
								<textarea @input="keyUpChangeNum" :data-idx="index" class="word-box" maxlength="30" name="user_note" placeholder="选填,最多30个字">

		</textarea>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="set-mes">
					<view class="use-item">
						<view>使用积分 : </view>
						<view class="jf">积分：￥98900</view>
						<radio @tap="usePoints" class="use-points" role="radio" aria-disabled="false" aria-checked="false"></radio>
					</view>
				</view> -->
				<view class="information">
					<view class="item">
						<view>订单号</view>
						<view class="co-red">{{treaminfo.master_order_sn}}</view>
					</view>
					<view class="item">
						<view>商品总价</view>
						<view class="co-red">￥ {{filter(treaminfo.goods_price)}}元</view>
					</view>
					<view class="item">
						<view>运费</view>
						<view class="co-red" v-if="treaminfo.shipping_price>0">{{filter(treaminfo.shipping_price)}}元</view>
						<view class="co-red" v-if="!treaminfo.shipping_price>0">包邮</view>
					</view>
					<view class="item">
						<view>订单总价</view>
						<view class="co-red">￥ {{filter(treaminfo.order_amount)}}元</view>
					</view>
					<!-- <view class="item">
						<view>优惠券</view>
						<view class="co-red">- ￥ 0.00元</view>
					</view> -->
					<!-- <view class="item">
						<view>使用余额</view>
						<view class="co-red">- ￥ 0.00元</view>
					</view> -->
					<!-- <view class="item">
						<view>使用积分</view>
						<view class="co-red">- ￥ 0.00元</view>
					</view> -->
				</view>
				<view class="btn-wrap">
					<button class="tips-btn" form-type="submit" id="submitOrder" role="button" aria-disabled="false">提交订单</button>
					<view class="pay-amount">
						<view class="payable">应付金额 : </view>
						<view class="co-red">￥ {{filter(treaminfo.total_amount)}}元</view>
					</view>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import config from "@/api/config.js";
	import common from "@/common/common.js";
	import {
		getTreamOrder,
		getUserInfo,
		getOrderInfo,
		getUserAddress,
		getStore,
		putTreamOrder,
		getAddressOne
	} from "@/api/api.js";
	export default {
		data() {
			return {
				hostUrl: config.host,
				imgUrl:config.imgUrl,
				addressList: "", //地址
				order: "", //订单信息
				treaminfo: "", //拼团订单
				goodsInputNum: 1, //商品数量
				storeInfo:"",//店铺信息
				storeList:"",//商品信息
				stateDate: {
					"order_sn": "", //子订单号
					"goods_num": "", //商品数量
					"address_id": "", //地址id
				},
				user_notes:{},//备注
				
			};
		},
		onLoad(options) {
			console.log(options.order)
			let params = {
				"order_sn": options.order,
				// "goods_num":1,
			}
			this.getOrderInfo(params)
			// this.getTreamOrder(params)
		},
		/*重新加载*/
		onShow() {
			let addressId = uni.getStorageSync("addressInfo");
			console.log(addressId)
		
			
				if (addressId) {
					// this._getCartOrder(addressId)
					this._getAddressOne(addressId)
				} else {
					/*获取用户地址*/
					// this._getUserAddress()
				}
		
		},
		methods: {
			/*订单信息  先获取订单信息，选择地址之后再获取拼团订单*/
			getOrderInfo(params) {
				getOrderInfo(params).then(res => {
					console.log(res)
					this.order = res;
					this.stateDate.order_sn = res.order_sn;
					this.stateDate.goods_num = res.goods_num;
					
					if (res.province == 0) {
						this._getUserAddress()
					} else {
						// this.getTreamOrder(this.stateDate)
					}
					this.getStore(res.store_id)
				})
			},
			/*拼团订单*/
			getTreamOrder(stateData) {
				getTreamOrder(stateData).then(res => {
					console.log(res)
					if (res) {
						this.treaminfo = res;
						this.storeList=res.order_list
						// this.goodsInputNum=res.goods_num;
						
					}
					if(res.msg=="单次购买数不能超过"){
						let msg=res.msg
						common.toast("none",msg,2000)
					}
					console.log(res)
				})
			},
			/*获取店铺信息*/
			getStore(params){
				getStore(params).then(res=>{
					if(res){
						this.storeInfo=res
					}
				})
			},
			/*获取用户地址*/
			_getUserAddress() {
				getUserAddress().then(res => {
					// console.log(res)
					if (res.length > 0) {
						this.addressList = res[0]
						/*获取订单*/
						let addressId = this.addressList.address_id;
						console.log(this.stateDate,"测试");
						this.stateDate.address_id = addressId;
					
						this.getTreamOrder(this.stateDate)
						// this.getOrderInfo(params)
					} else {
						this.enterAddressPage()
					}

				})
			},
			
			/*选择单个地址*/
			_getAddressOne(addressId) {
				getAddressOne(addressId).then(res => {
					console.log(res)
					this.addressList = res;
					let addressId = res.address_id
					this.stateDate.address_id = addressId;
										
					this.getTreamOrder(this.stateDate)

					// this._getCartOrder(this.params)
				})
			},
			/*选中地址*/
			enterAddressPage() {
				uni.navigateTo({
					url: "/pages/user/address_list/address_list?operate=selectAdress"
				})
			},
			//选择优惠劵
			// useCoupon(e) {
			// 	console.log(e)
			// 	let cdx = e.currentTarget.dataset.idx
			// 	let coupons = this.orderList[cdx].usable_coupons;
			// 	// this.coupons=coupons;
			// 	let url = "/pages/user/checkcoupon/checkcoupon"
			// 	// uni.setStorageSync("couponInfo",coupon);
			// 	let couponidArr = this.params.order_use_coupon_ids.split(",")
			// 	let couponid = couponidArr[cdx]
			// 	console.log(couponidArr)

			// 	uni.setStorageSync("couponInfo", {
			// 		coupon: coupons,
			// 		use_couponId: couponid
			// 	});


			// 	uni.navigateTo({
			// 		url: url
			// 	})


			// },
			add(){//数量
				
				this.goodsInputNum++
				this.stateDate.goods_num=this.goodsInputNum;
				this.getTreamOrder(this.stateDate)
			},
			inputNum(){
				/*输入数>库存数 =库存数*/
				
				if(this.goodsInputNum<=0){
					this.goodsInputNum=1
				}
			
				this.stateDate.goods_num=this.goodsInputNum;
				this.getTreamOrder(this.stateDate)
			},
			reduce(){ //减
				this.goodsInputNum--;
				if(this.goodsInputNum<1){
					this.goodsInputNum=1;
				}
				this.stateDate.goods_num=this.goodsInputNum;
				this.getTreamOrder(this.stateDate)
			},
			//备注
			keyUpChangeNum(e) {
				console.log(e)
				let cdx = e.currentTarget.dataset.idx
				let note = e.detail.value;
				let user_notes = "";
				let storeList = this.treaminfo.order_list;
				for (var i = 0; i < storeList.length; i++) {
					var s = storeList[i]

					if (cdx == i) {
						s.user_notes = note
						this.user_notes = note
					}
					// this._getCartOrder(this.params)
					// user_notes[s.store_id]=note+s.store_id
					console.log(storeList)
					this.storeList=storeList;
				}

			},
			/*用户信息*/
			getUserInfo() {
				getUserInfo().then(res => {
					console.log(res)
					if (res) {
						this.userInfo = res
					}

				})
			},
			/*保留2位小数*/
			filter:function(e){
				let num=parseFloat(e).toFixed(2)
				return num
			},
			submitForm(){
				var user_notes={}
				this.storeList.forEach((i,index)=>{
					user_notes[i.store_id]=i.user_notes
				
				})
				var params={
					
					"order_sn":this.stateDate.order_sn,
					"goods_num": this.stateDate.goods_num,
					"address_id": this.addressList.address_id,
					"user_notes": "", //备注
				}
				params.user_notes=user_notes
				
				this.putTreamOrder(params)
			},
			/*提交订单*/
			putTreamOrder(params){
				putTreamOrder(params).then(res=>{
					console.log(res)
					if(res.status==1){
						
						uni.redirectTo({
							url:`/pages/cart/cart4/cart4?order=${res.result.master_order_sn}`
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.user-mes {
		position: relative;
		background-color: #fff;
		font-size: 32rpx;
		color: #333;
	}

	.user-contact {
		padding: 24rpx 80rpx;
	}

	.location {
		position: relative;
		padding: 0 80rpx 24rpx;
	}

	.pos-icon {
		position: absolute;
		left: 30rpx;
		top: 0;
		width: 32rpx;
		height: 32.5rpx;
	}

	.border-img {
		width: 100%;
		height: 16rpx;
		font-size: 0;
	}

	.update-logistics {
		position: absolute;
		right: 0;
		top: 0;
		width: 80rpx;
		height: 148rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.arrow-rigth {
		width: 32rpx;
		height: 32rpx;
	}

	.order-meg {
		font-size: 28rpx;
	}

	.order-detail {
		padding: 30rpx 0;
		color: #666;
		min-height: 150rpx;
		background-color: #f8f8f8;
		margin-bottom: 10rpx;
	}

	.goods-img {
		float: left;
		width: 150rpx;
		height: 150rpx;
		margin: 0 20rpx;
	}

	.order-cont {
		float: left;
		width: 400rpx;
	}

	.goods-name {
		max-height: 72rpx;
		line-height: 36rpx;
		overflow: hidden;
		margin-bottom: 16rpx;
	}

	.goods-support {
		color: #f5b900;
		font-size: 24rpx;
		margin-bottom: 12rpx;
	}

	.goods-color {
		font-size: 24rpx;
	}

	.order-num {
		float: right;
		font-size: 24rpx;
		margin-top: 10rpx;
		margin-right: 20rpx;
		text-align: right;
		line-height: 42rpx;
		width: 140rpx;
	}

	.goods-num {
		display: flex;
		margin-top: 12rpx;
		width: 136rpx;
		border: 1px solid #f3f3f3;
		height: 50rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.goods-num>view {
		width: 44rpx;
		line-height: 50rpx;
		color: #666;
	}

	.goods-num>input {
		width: 44rpx;
		height: 42rpx;
		border-left: 1px solid #f3f3f3;
		border-right: 1px solid #f3f3f3;
	}

	.set-mes {
		background-color: #fff;
		padding: 0 20rpx;
		font-size: 30rpx;
		color: #333;
	}

	.set-mes>view {
		display: flex;
		align-items: center;
		height: 92rpx;
		border-bottom: 1px solid #f3f3f3;
	}

	.set-item {
		justify-content: space-between;
	}

	.set-btn {
		display: flex;
		font-size: 24rpx;
	}

	.set-mes input {
		width: 380rpx;
		height: 50rpx;
		line-height: 50rpx;
		border: 1px solid #f3f3f3;
	}

	.use-btn {
		width: 100rpx;
		height: 50rpx;
		margin-left: 20rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #ff3b3b;
		color: #fff;
	}

	.coupon-num {
		height: 36rpx;
		margin-left: 20rpx;
		padding: 0 16rpx;
		line-height: 36rpx;
		text-align: center;
		background-color: #ff3b3b;
		color: #fff;
		font-size: 24rpx;
	}

	.word-box {
		width: 600rpx;
		height: 34rpx;
		line-height: 40rpx;
	}

	.information {
		padding: 0 20rpx;
		background-color: #fff;
		margin: 20rpx 0;
	}

	.information .item {
		display: flex;
		justify-content: space-between;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		color: #666;
	}

	.btn-wrap {
		height: 100rpx;
		background-color: #fff;
	}

	.tips-btn {
		float: right;
		width: 200rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background-color: #ff3b3b;
	}

	.pay-amount {
		float: right;
		display: flex;
		align-items: center;
		height: 100rpx;
		font-size: 26rpx;
		margin-right: 40rpx;
	}

	.payable {
		color: #333;
		margin-right: 20rpx;
	}

	/* 物流列表弹框 */
	.shipping-modal {
		z-index: 20;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		overflow-y: hidden;
		color: #666666;
		background-color: white;
	}

	.shipping-nav {
		text-align: center;
		font-size: 35rpx;
		padding-top: 30rpx;
	}

	.shipping-list {
		padding: 20rpx 30rpx 40rpx;
		font-size: 28rpx;
	}

	.shipping-item {
		display: block;
		padding: 20rpx 0;
	}

	.shipping-btn {
		width: 100%;
		color: white;
		background-color: #ff3b3b;
		line-height: 90rpx;
		text-align: center;
		font-size: 40rpx;
	}

	.store-list {
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.store-mes {
		height: 34rpx;
		padding: 33rpx 20rpx;
		display: flex;
	}

	.coupon {
		display: flex;
	}

	.totle-weight {
		padding-right: 20rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: right;
	}

	.store-ico {
		height: 34rpx;
		width: 34rpx;
		margin-right: 20rpx;
	}

	switch .wx-switch-input {
		height: 42rpx;
		border-radius: 4rpx;
	}

	switch .wx-switch-input::before,
	switch .wx-switch-input::after {
		height: 40rpx;
		border-radius: 4rpx;
	}

	.use-points {
		padding-left: 10rpx;
	}

	.use-item .jf {
		color: #cacaca;
		margin-left: 280rpx;
		font-size: 26rpx;
		width: 200rpx;
		text-align: right;
	}
</style>
